<template>
  <div class="login-container"
       ref="login"
       @keyup.enter.native="handleLogin">
    <top-color v-show="false"></top-color>
    <div class="login-top">
      <div class="login-weaper">
        <div class="flexCont">
          <img src="../../../public/img/commImg/logo.png" alt="" class="logoImg">
          <div class="logo-title">
            <p class="title-ZH">数字化综合服务</p>
            <p class="title-EN">Digital Integrated</p>
          </div>
          <div class="login-welcom">欢迎登录数字化综合服务平台</div>
        </div>
      </div>
    </div>
    <div class="login-mid">
      <el-carousel :interval="8000" trigger="click" height="100%">
        <el-carousel-item v-for="(item,index) in banners" :key="index">
          <div class="login-left" :style="{backgroundImage: 'url(' + item.url + ')','background-position': '30%','width':index==0?'80%':''}"></div>
        </el-carousel-item>
      </el-carousel>
      <div class="login-right" :style="{'border-bottom-right-radius':isOcode?'0':'10px'}">
        <ul class="changeLogin">
          <li :class="['itemLi']" @click="changLogin('user')">账号密码</li>
        </ul>
        <userLogin @showOcode="showOcodeChange" ref="userLogin" v-if="activeName==='user'"></userLogin>
        <codeLogin v-else-if="activeName==='code'"></codeLogin>
      </div>
    </div>
    <div class="login-bottom">
      <bottom></bottom>
    </div>
  </div>
</template>
<script>
  import userLogin from "./userlogin";
  import codeLogin from "./codelogin";
  import thirdLogin from "./thirdlogin";
  import {mapGetters} from "vuex";
  import {dateFormat} from "@/util/date";
  import {validatenull} from "@/util/validate";
  import topLang from "@/page/index/top/top-lang";
  import topColor from "@/page/index/top/top-color";
  import {getQueryString, getTopUrl} from "@/util/util";
  import bottom from "../index/bottom/bottom";
import { validateURL } from '../../util/validate';

  export default {
    name: "login",
    components: {
      userLogin,
      codeLogin,
      thirdLogin,
      topLang,
      topColor,
      bottom
    },
    data() {
      return {
        isOcode:false,
        time: "",
        activeName: "user",
        socialForm: {
          tenantId: "000000",
          source: "",
          code: "",
          state: "",
        },
        banners:[
            {url:require('../../../public/img/commImg/login-4.png')},
            {url:require('../../../public/img/commImg/login-3.png')}
        ]
      };
    },
    watch: {
      $route() {
        this.handleLogin();
      },
    },
    created() {
      this.handleLogin();
      this.getTime();
    },
    mounted() {
    },
    computed: {
      ...mapGetters(["website", "tagWel"])
    },
    props: [],
    methods: {
      showOcodeChange(v){
        this.isOcode = v
      },
      register(){
        this.$router.push({path:'/register'})
      },
      forget(){
        this.$router.push({path:'/register'})
      },
      changLogin(type){
        this.activeName = type
      },
      getTime() {
        setInterval(() => {
          this.time = dateFormat(new Date());
        }, 1000);
      },
      handleLogin() {
        const topUrl = getTopUrl();
        const redirectUrl = "/oauth/redirect/";
        this.socialForm.source = getQueryString("source");
        this.socialForm.code = getQueryString("code");
        this.socialForm.state = getQueryString("state");
        if (validatenull(this.socialForm.source) && topUrl.includes(redirectUrl)) {
          let source = topUrl.split("?")[0];
          source = source.split(redirectUrl)[1];
          this.socialForm.source = source;
        }
        if (!validatenull(this.socialForm.source) && !validatenull(this.socialForm.code) && !validatenull(this.socialForm.state)) {
          const loading = this.$loading({
            lock: true,
            text: '第三方各系统登录中,请稍后。。。',
            spinner: "el-icon-loading"
          });
          this.$store.dispatch("LoginBySocial", this.socialForm).then(() => {
            window.location.href = topUrl.split(redirectUrl)[0];
            this.$router.push({path: this.tagWel.value});
            loading.close();
          }).catch(() => {
            loading.close();
          });
        }
      }
    }
  };
</script>

<style lang="scss">
  @import "@/styles/login.scss";
  .changeLogin{
    display: flex;
    flex-direction: column;
    p{
      font-size: 24px;
    font-weight: 600;
    }
  }
</style>
